<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- transition 实现渐变动画 -->
  <style>
    .base {
         width: 100px;
         height: 100px;
         display: inline-block;
         background-color: #0EA9FF;
         border-width: 5px;
         border-style: solid;
         border-color: #5daf34;
         /* 填写需要变化的css属性 */
         transition-property: width, height, background-color, border-width;
         /* 完成过渡效果需要的时间单位(s或者ms) */
         transition-duration: 2s;
         /* 完成效果的速度曲线 */
         transition-timing-function: ease-in;
         /* 动画效果的延迟触发时间 */
         transition-delay: 500ms;
     }

     /*简写*/
     /*transition: all 2s ease-in 500ms;*/
     .base:hover {
         width: 200px;
         height: 200px;
         background-color: #5daf34;
         border-width: 10px;
         border-color: #3a8ee6;
     }
    </style>
    <div class="base"></div>

    <!-- transform 转变动画 -->
    <style>
      .base {
          width: 100px;
          height: 100px;
          display: inline-block;
          background-color: #0EA9FF;
          border-width: 5px;
          border-style: solid;
          border-color: #5daf34;
          transition-property: width, height, background-color, border-width;
          transition-duration: 2s;
          transition-timing-function: ease-in;
          transition-delay: 500ms;
      }
      .base2 {
          transform: none;
          transition-property: transform;
          transition-delay: 5ms;
      }
  
      .base2:hover {
          transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          animation: rotate 2s;
      }
  </style>
   <div class="base base2"></div>

   <!-- animation 实现自定义动画 -->
   <style>
    /* from 表示最开始的那一帧，to 表示结束时的那一帧 */
    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
    /* 也可以使用百分比刻画生命周期 */
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    /* 定义好了关键帧后，下来就可以直接用它了： */
    /* animation: rotate 2s; */
   </style>
</body>
</html>